<link type="text/css" rel="stylesheet" href="<?php echo $this->baseUrl() ?>/public/css/jquery.Jcrop.css" />
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/jquery.form.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl() ?>/public/js/jquery.Jcrop.min.js"></script>

<script type="text/javascript">
	function init(){
		showForm(1);
		//initShow(1);
	}
	function showForm(index){
		$(".crop-form").each(function (i,e) {
			if(index == (i+1)){
				e.style.display = "block";
			}else{
				e.style.display = "none";
			}
		});
		$(".crop-response").each(function (i,e) {
			if(index == (i+1)){
				e.style.display = "block";
				initShow(index);
			}else{
				e.style.display = "none";
			}
		});
		return false;
	}
	
	function initShow(i){
		$('#crop_'+i).Jcrop({
			setSelect: [200,200,350,350],
			onChange: function(coords){
				var rx = 70 / coords.w;
				var ry = 51 / coords.h;
				$('#preview_'+i).css({
					width: Math.round(rx * $('#crop_'+i).width()) + 'px',
					height: Math.round(ry * $('#crop_'+i).height()) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
				$('#x_'+i).val(coords.x);
				$('#y_'+i).val(coords.y);
				$('#w_'+i).val(coords.w);
				$('#h_'+i).val(coords.h);
			},
			onSelect: function(coords){
				src = $('#crop_'+i).attr('src');
				$('#preview_'+i).attr('src',src);
				var rx = 70 / coords.w;
				var ry = 51 / coords.h;
				$('#preview_'+i).css({
					width: Math.round(rx * $('#crop_'+i).width()) + 'px',
					height: Math.round(ry * $('#crop_'+i).height()) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
				$('#x_'+i).val(coords.x);
				$('#y_'+i).val(coords.y);
				$('#w_'+i).val(coords.w);
				$('#h_'+i).val(coords.h);
			},
			aspectRatio: 70/51
		});
	}
	
	function test(index){
		$('#response_'+index).html('<div style="with:100%;height:100px;text-align:center"><p>Đang tải</p><img src="<?php echo str_replace("/index.php","",$this->fullUrl("/public/img/ajax-loader.gif")) ?>" /></div>');

		$('#form_'+index).ajaxSubmit({
			target:        '#response_'+index,
			success: function(){
				src = $('#crop_'+index).attr('src');
				$('#preview_'+index).attr('src',src);
				$('#crop_'+index).Jcrop({
					setSelect: [200,200,350,350],
					onChange: function(coords){
						var rx = 70 / coords.w;
						var ry = 51 / coords.h;

						$('#preview_'+index).css({
							width: Math.round(rx * $('#crop_'+index).width()) + 'px',
							height: Math.round(ry * $('#crop_'+index).height()) + 'px',
							marginLeft: '-' + Math.round(rx * coords.x) + 'px',
							marginTop: '-' + Math.round(ry * coords.y) + 'px'
						});
					
						$('#x_'+index).val(coords.x);
						$('#y_'+index).val(coords.y);
						$('#w_'+index).val(coords.w);
						$('#h_'+index).val(coords.h);
					},
					onSelect: function(coords){
						var rx = 70 / coords.w;
						var ry = 51 / coords.h;

						$('#preview_'+index).css({
							width: Math.round(rx * $('#crop_'+index).width()) + 'px',
							height: Math.round(ry * $('#crop_'+index).height()) + 'px',
							marginLeft: '-' + Math.round(rx * coords.x) + 'px',
							marginTop: '-' + Math.round(ry * coords.y) + 'px'
						});
					
						$('#x_'+index).val(coords.x);
						$('#y_'+index).val(coords.y);
						$('#w_'+index).val(coords.w);
						$('#h_'+index).val(coords.h);
					},
					aspectRatio: 70/51
				});
			}
		});
	}
</script>
<div class="grid_20">
        <span class="my_account">&gt;&gt; Két Của Tui &gt;&gt; Đăng Bán</span><br><br>
        <div class="step_top">              
            <a href="<?php echo $this->fullUrl('/bid/product/create1/') ?>"><div class="grid_4 step alpha">
                <div class="step_content">
                    <span class="step_name">buoc 1</span><br>	
                    <span class="step_des">(đăng ký nhóm sản phẩm)</span>
                </div>
            </div></a>
            <div class="grid_1"><div class="sep_arrow"></div></div>
            
            <a href="<?php echo $this->fullUrl('/bid/product/create2/') ?>"><div class="grid_4 step">
                <div class="step_content">
                    <span class="step_name">buoc 2</span><br>	
                    <span class="step_des">(đăng ký lên sàn)</span>
                </div>
            </div></a>
            
            <div class="grid_1"><span class="sep_arrow"></span></div>                
            
            <a href="#"><div class="grid_4 step_current">
                <div class="step_content">
                    <span class="step_name">buoc 3</span><br>	
                    <span class="step_des">(đăng hình sản phẩm)</span>
                </div>
            </div></a>
            <div class="grid_1"><span class="sep_arrow"></span></div>                
            
            <a href="#"><div class="grid_4 step omega">
                <div class="step_content">
                    <span class="step_name">buoc 4</span><br>	
                    <span class="step_des">(xác nhận)</span>
                </div>
            </div></a>
        </div> <!-- End Step top -->                           
		<div class="clear"></div>                    
        <div class="sep_big grid_19 prefix_1 alpha"><hr></div>        		
        <div class="clear"></div>
        <div class="grid_19 prefix_1 alpha">
        	<div class="message require" id="message"></div>
            <div class="step_content">
            * Hình đầu tiên của sản phẩm sẽ được miễn phí, các tấm tiếp theo giá 0.5 PTZ/tấm. Up tối đa 5 hình/sản phẩm.<br>
			* Định dạng hình hỗ trợ: JPEG, PNG, GIF.<br>
			* Dung lượng tối đa/hình là 3MB.<br><br>
			<?php for($i = 1; $i <= 5; $i++): ?>
			<form id="form_<?php echo $i ?>" <?php if($i != 1): ?>style="display:none"<?php endif ?> class="crop-form" action="<?php echo $this->fullUrl('/bid/product/uploadimage/') ?>" enctype="multipart/form-data" method="post">
				<input type="hidden" name="id" value="crop_<?php echo $i ?>" />
				<input type="file" name="file" onchange="test(<?php echo $i ?>)">
				<br><br>
		        <br><br>
            </form>
            <div id="response_<?php echo $i ?>" class="crop-response" <?php if($i != 1): ?>style="display:none"<?php endif ?>>
            	<?php $tmp = "img$i" ?>
            	<?php if(isset($this->product)): ?>
		        	<?php if($this->product->$tmp): ?>
		        		<img src="<?php echo $this->baseUrl('/public/upload/').$this->product->$tmp ?>" alt="img1" id="<?php echo 'crop_'.$i ?>"/>
						<br/><br/>
		        	<?php endif ?>
		        <?php endif ?>
            </div>
            <script type="text/javascript">
        		$('#form_<?php echo $i ?>').ajaxForm({
        			target:        '#response_<?php echo $i ?>',
					success: function(){
						src = $('#crop_<?php echo $i ?>').attr('src');
						$('#preview_<?php echo $i ?>').attr('src',src);
						$('#crop_<?php echo $i?>').Jcrop({
							setSelect: [200,200,350,350],
							onChange: showPreview<?php echo $i ?>,
							onSelect: showPreview<?php echo $i ?>,
							aspectRatio: 70/51
						});
					}
        		});

				function showPreview<?php echo $i ?>(coords){
					var rx = 70 / coords.w;
					var ry = 51 / coords.h;

					$('#preview_<?php echo $i ?>').css({
						width: Math.round(rx * $('#crop_<?php echo $i ?>').width()) + 'px',
						height: Math.round(ry * $('#crop_<?php echo $i ?>').height()) + 'px',
						marginLeft: '-' + Math.round(rx * coords.x) + 'px',
						marginTop: '-' + Math.round(ry * coords.y) + 'px'
					});
					
					$('#x_<?php echo $i ?>').val(coords.x);
					$('#y_<?php echo $i ?>').val(coords.y);
					$('#w_<?php echo $i ?>').val(coords.w);
					$('#h_<?php echo $i ?>').val(coords.h);
				}
            </script>
            <?php endfor ?>
				    <div class="grid_2 nimage"><a href="#" onclick="return showForm(1)"><div style="width:70px;height:51px;overflow:hidden;"><img src="<?php echo $this->baseUrl('/public/upload/thumbs/').$this->product->img1 ?>" id="preview_1"/></div></a></div>
				    <div class="grid_2 nimage"><a href="#" onclick="return showForm(2)"><div style="width:70px;height:51px;overflow:hidden;"><img src="<?php echo $this->baseUrl('/public/upload/thumbs/').$this->product->img2 ?>" id="preview_2"/></div></a></div>
				    <div class="grid_2 nimage"><a href="#" onclick="return showForm(3)"><div style="width:70px;height:51px;overflow:hidden;"><img src="<?php echo $this->baseUrl('/public/upload/thumbs/').$this->product->img3 ?>" id="preview_3"/></div></a></div>
				    <div class="grid_2 nimage"><a href="#" onclick="return showForm(4)"><div style="width:70px;height:51px;overflow:hidden;"><img src="<?php echo $this->baseUrl('/public/upload/thumbs/').$this->product->img4 ?>" id="preview_4"/></div></a></div>                                  
				    <div class="grid_2 nimage"><a href="#" onclick="return showForm(5)"><div style="width:70px;height:51px;overflow:hidden;"><img src="<?php echo $this->baseUrl('/public/upload/thumbs/').$this->product->img5 ?>" id="preview_5"/></div></a></div>
				    
				    <div class="sep_his"><hr></div><br>
				</div><!-- End Step Content -->
		        
		        Dịch vụ thêm:
		        <div class="clear"></div>
		        <form id="main_form" action="<?php echo $this->fullUrl('/bid/product/savestep3/') ?>" method="post">
		        <?php for($i = 1; $i <= 5; $i++): ?>
					<input type="hidden" id="w_<?php echo $i ?>" name="w_<?php echo $i ?>" />
					<input type="hidden" id="h_<?php echo $i ?>" name="h_<?php echo $i ?>" />
					<input type="hidden" id="x_<?php echo $i ?>" name="x_<?php echo $i ?>" />
					<input type="hidden" id="y_<?php echo $i ?>" name="y_<?php echo $i ?>" />
		        <?php endfor ?>
		        <div class="grid_18 prefix_1 alpha">
		        	<div class="grid_6 alpha"><input type="radio" name="plus_1" class="styled" checked="checked" value="all"> Đăng tiêu đề in đậm <a href="#" id="tooltip" title="Sản phẩm có tiêu đề được in đậm nổi bật,&lt;br /&gt;dễ gây sự chú ý, thu hút và bắt mắt hơn." class="user_usage">(?)</a><br><br>

		            <input type="radio" name="plus_1" class="styled" value="verified"> Đăng mục kiểu Gallery View <a href="#" id="tooltip" title="Sản phẩm của bạn được trình bày dưới dạng phòng trưng bày. &lt;br /&gt;Hình ảnh đấu giá được trình bày lớn hơn, đẹp, dễ nhìn và bắt mắt hơn." class="user_usage">(?)</a></div>
		            <div class="grid_10 prefix_2 omega"><input type="radio" name="plus_2" class="styled" checked="checked" value="all"> Đăng mục hot <a href="#" id="tooltip" title="Sản phẩm đăng bán của bạn được gắn thêm biểu tượng Hot&lt;br/&gt; kế bên tiêu đề để thể hiện đẳng cấp món hàng.&lt;br/&gt; Trong hạng mục liệt kê sản phẩm, các sản phẩm đấu giá HOT &lt;br/&gt;sẽ được sắp xếp ưu tiên nằm đầu." class="user_usage">(?)</a><br><br>

		            <input type="radio" name="plus_2" class="styled" value="verified"> Đăng mục hot trang chủ <a href="#" id="tooltip" title="Sản phẩm của bạn được xếp trên trang chủ của BidBiz. &lt;br/&gt;Chúng tôi chỉ có 08 chỗ dành cho danh mục đấu giá HOT trên trang chủ." class="user_usage">(?)</a></div>
		      		<div class="sep_his"><hr></div><br>
		        	<div class="grid_6 alpha"><input type="radio" name="plus_3" class="styled" checked="checked" value="all"> GALLERY COMBO (Gallery + In Đậm)<br><br>

		            <input type="radio" name="plus_3" class="styled" value="verified"> HOT COMBO (Gallery + HOT + In Đậm)</div>
		            <div class="grid_10 prefix_2 omega"><input type="radio" name="plus_3" class="styled" value="all"> HOT COMBO Trang chủ (Gallery + HOT trang chủ + In Đậm)<br><br>

		            <input type="radio" name="plus_3" class="styled" value="verified"> Đăng mục VIP (Gallery + In Đậm + VIP)</div>
		        </div>
		        <div class="sep_his"><hr></div><br>
				Nếu bạn đã chắc chắn cho sự lựa chọn của mình, xin vui lòng chọn tiếp tục<br><br>
				<div class="clear"></div>                   
				<div class="prefix_6 grid_3 suffix_1 alpha"><input type="button" onclick="window.location='<?php echo $this->fullUrl('/bid/product/create2/') ?>'" class="textStep" name="back" value="Quay Lại &lt;&lt;"></div>
				<div class="grid_9 omega"><input type="submit" id="step_4" class="textStep" name="forward" value="Tiếp Tục &gt;&gt;"></div>
				</form>
    	</div>
        <div id="test"></div>
        <script type="text/javascript">
			$('#main_form').ajaxForm({
				success: function(data){
					if(data == 'finish'){
						window.location = "<?php echo $this->fullUrl('/bid/product/create4/') ?>";
					}else{
						$('#message').html(data);
						alert('Dữ liệu không hợp lệ, xem thông báo phía trên');
					}
				}
			});
			$(document).ready(function(){
				init();
			});
        </script>
</div>
